<template>
  <div class="check-review">
    <mu-flex align-items="center" class="form-line">
      <span class="form-line-item">筛选：</span>
      <mu-radio v-model="isRechecked" class="form-line-item" value="all" label="不限"></mu-radio>
      <mu-radio v-model="isRechecked" class="form-line-item" value="true" label="已处理"></mu-radio>
      <mu-radio v-model="isRechecked" class="form-line-item" value="false" label="未处理"></mu-radio>
    </mu-flex>
    <check-review-page ref="checkReviewPage" :fetcher="getCheckReview" />
  </div>
</template>

<script>
import CheckReviewPage from '@/components/CheckReviewPage'
import api from '@/api'

export default {
  name: 'CheckReview',
  components: {
    CheckReviewPage
  },
  data() {
    return {
      isRechecked: 'false'
    }
  },
  watch: {
    isRechecked() {
      this.$refs.checkReviewPage.refresh()
    }
  },
  methods: {
    getCheckReview(page) {
      const isRecheckedMap = {
        all: null,
        true: 1,
        false: 0
      }
      const is_rechecked = isRecheckedMap[this.isRechecked] || null
      return api.fetchRecheckCommentMessages({ is_rechecked }, page)
    }
  }
}
</script>

<style scoped>
.check-review {
  padding: 12px;
}
.form-line {
  padding-bottom: 8px;
}
.form-line-item {
  margin-right: 16px;
}
</style>
